<script>
import { ref, h, computed, watch, onMounted } from "vue";
import * as antd from "ant-design-vue";
import rules from "../Util/rules";
import is from "../Util/is";
import InputView from "./input.vue";

export default {
    props: ["value", "itemKey", "itemIndex", "FormOption", "CopmOption"],
    emits: ["ChangeEnable"],
    setup(props, { attrs, slots, emit, expose }) {
        const FormOption = computed(() => {
            return {
                ...props.FormOption,
                rules: undefined,
                required: props.FormOption.required ? props.FormOption.required : undefined,
            };
        });

        async function Check(val) {
            if (props.FormOption.rules) {
                if (is(props.FormOption.rules, "async")) {
                    props.FormOption.validateStatus = "validating";
                    props.FormOption.help = undefined;
                    var help = await props.FormOption.rules(val, props.itemKey, props.FormOption.label);
                    props.FormOption.help = help || undefined;
                    if (help) {
                        props.FormOption.validateStatus = "error";
                    } else {
                        props.FormOption.validateStatus = "success";
                    }
                } else {
                    var help = rules(props.FormOption.rules, val, props.FormOption.label);
                    props.FormOption.help = help || undefined;
                    if (help) {
                        props.FormOption.validateStatus = "error";
                    } else {
                        props.FormOption.validateStatus = "success";
                    }
                }
            }
        }

        // 取值
        function GetValue(Value, Str) {
            var _arr = Str.split(".");
            _arr.unshift(Value);
            return _arr.reduce((p, n) => {
                return p[n];
            });
        }

        // 赋值
        function SetValue(Value, Str, val) {
            var _arr = Str.split(".");
            _arr.unshift(Value);
            return _arr.reduce((p, n, index) => {
                if (index == _arr.length - 1) {
                    p[n] = val;
                    Check(val);
                }
                return p[n];
            });
        }

        var keyArray = ["state", "name", "TextObject"];
        var EventString = new Function(keyArray.join(","), "return state");

        const Enable = computed(() => {
            var ValueArray = [];
            for (let i = 0; i < keyArray.length; i++) {
                const element = keyArray[i];
                ValueArray.push(props.value[element]);
            }
            return EventString.apply(null, ValueArray);
        });

        watch(Enable, (val) => {
            emit("ChangeEnable", val, props.itemIndex);
        });

        return function () {
            return h(antd.FormItem, FormOption.value, () => [
                h(InputView, {
                    value: GetValue(props.value, props.itemKey),
                    "onUpdate:value": (value) => {
                        SetValue(props.value, props.itemKey, value);
                    },
                    option: {
                        ...props.CopmOption,
                    },
                }),
            ]);
        };
    },
};
</script>
